<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品类型</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/inputfile.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
    <script type="text/javascript" src="js/template-native.js"></script>
    <script type="text/javascript" src="js/other.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#articlelist').datagrid({
                title:"物品类型列表",
                pagination: true,
                iconCls: 'icon-save',
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
                fitColumns:true,
                data: {
                    total: 20,
                    rows: [
                        { 'id': 1, 'name': '数码产品'},
                        { 'id': 2, 'name': '书籍'},
                        { 'id': 3, 'name': '衣服'},
                    ]
                },
                columns: [
                    [
                        {field: 'id', title: '类型编号',  width: '20%', align: 'center'},
                        {field: 'name', title: '类型名称', width: '20%', align: 'center'}
                    ]
                ],
                toolbar: "#tb",
                pagination: true,
                pageSize: 20,
                singleSelect: true,
                pageList: [5,10,20],
                
            });

            $("#dd").dialog({
                title: '新增类型',
                width: 400,
                height: 300,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text:'添加',
                    iconCls:'icon-ok',
                    handler:function(){
                    }
                },{
                    text:'关闭',
                    iconCls:'icon-no',
                    handler:function(){
                        $("#dd").dialog("close");
                    }
                }]
            });

            $("#mm").dialog({
                title: '修改类型',
                closed:true,
                cache: false,
                width:400,
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text:'修改',
                    iconCls:'icon-ok',
                    handler:function(){
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $("#mm").dialog("close");
                    }
                }]
            });

            $('#article_type_modify').click(function () {
                var row = $('#articlelist').datagrid('getSelected');
                if(row==null){
                    alert('请先选择要修改的产品类型')
                    return;
                }
                $("#mm").dialog('open');
            });

        });

        function changeImgAdd(obj) {
            var file = obj.files[0];
            var url = window.URL.createObjectURL(file);
            $("#img_add").attr("src", url);
        }

        function changeImgModify(obj) {
            var file = obj.files[0];
            var url = window.URL.createObjectURL(file);
            $("#img_modify").attr("src", url);
        }
    </script>
</head>
<body>
    <div id="tb" style="padding:3px">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
            onclick="javascript:$('#dd').dialog('open')">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="article_type_modify">修改</a>
    </div>
    
    <table id="articlelist"></table>
    
    <div id="dd" style="padding-left: 20%;padding-top: 20px;">
        <form id="frm_add">
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" name="en.color" id="name_add" style="width:70%;height: 30px;"
                    data-options="label:'类型名称：',labelWidth:70,required:true">
            </div>
            <div style="margin-bottom:30px">
                <table>
                    <tr>
                        <td valign="top">
                            <a href="javascript:;" class="file">选择封面图片
                                <input type="file" id="imgurl_add" onchange="changeImgAdd(this);">
                            </a>
                        </td>
                        <td>
                            <img src="images/zwtp.png" id="img_add" style="width: 100px;height: 100px;" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>

    <div id="mm" style="padding-left: 20%;padding-top: 20px;">
        <form id="frm_modify">
            <div style="margin-bottom:30px">
                <input id="id_modify" type="hidden">
                <input class="easyui-textbox" id="name_modify" style="width:70%;height: 30px;"
                    data-options="label:'类型名称：',labelWidth:70,required:true">
            </div>
            <div style="margin-bottom:30px">
                <table>
                    <tr>
                        <td valign="top">
                            <a href="javascript:;" class="file">选择封面图片
                                <input type="file" id="imgurl_modify" onchange="changeImgModify(this);">
                            </a>
                        </td>
                        <td>
                            <img src="images/zwtp.png" id="img_modify" style="width: 100px;height: 100px;" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
    
</body>
</html>